<template>
  <el-form :model="form" label-position="top">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="组件数据" name="1">
        <el-form-item label="组件类型">
          <el-input v-model="form.config.echartTypeName" disabled />
        </el-form-item>
        <el-form-item label="组件标识">
          <el-input v-model="form.i" disabled />
        </el-form-item>
        <el-form-item label="主标题">
          <div class="el-input el-input--default">
            <div class="el-input__wrapper">
              <input
                v-model.lazy="form.config.option.title.text"
                class="el-input__inner"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="副标题">
          <div class="el-input el-input--default">
            <div class="el-input__wrapper">
              <input
                v-model.lazy="form.config.option.title.subtext"
                class="el-input__inner"
              />
            </div>
          </div>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="数据集设置" name="2">
        <el-form-item label="数据集">
          <el-select
            v-model="form.config.dataset.datasetId"
            @change="datasetChange"
          >
            <el-option
              v-for="item in datasetList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="类别轴 / 维度">
          <el-select
            v-model="form.config.dataset.dims"
            multiple
            @change="dataChange"
          >
            <el-option
              v-for="item in dimensionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option
          ></el-select>
        </el-form-item>
        <el-form-item label="值轴 / 指标">
          <el-select
            v-model="form.config.dataset.indexs"
            multiple
            @change="dataChange"
          >
            <el-option
              v-for="item in indexList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option
          ></el-select>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="基础设置" name="3">
        <el-form-item label="顶部距离">
          <div class="el-input el-input--default">
            <div class="el-input__wrapper">
              <input
                v-model.lazy="form.config.option.grid.top"
                class="el-input__inner"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="底部距离">
          <div class="el-input el-input--default">
            <div class="el-input__wrapper">
              <input
                v-model.lazy="form.config.option.grid.bottom"
                class="el-input__inner"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="左侧距离">
          <el-slider
            v-model="form.config.option.grid.left"
            :min="0"
            :max="100"
            size="small"
          />
        </el-form-item>
        <el-form-item label="右侧距离">
          <el-slider
            v-model="form.config.option.grid.right"
            :min="0"
            :max="100"
            size="small"
          />
        </el-form-item>
        <el-form-item label="配色方案">
          <el-select v-model="form.config.colorId" @change="colorChange">
            <el-option
              v-for="item in configData.colorScheme"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
              <div style="display: flex">
                <template
                  v-for="(item, index) in form.config.option.color"
                  :key="index"
                >
                  <div class="color-item" :style="{ background: item }"></div>
                </template>
                <span style="margin-left: 10px">{{ item.label }}</span>
              </div>
            </el-option></el-select
          >
        </el-form-item>
        <el-form-item label="颜色自定义">
          <el-row :gutter="4">
            <template
              v-for="(item2, index2) in form.config.option.color"
              :key="index2"
            >
              <el-color-picker
                v-model="form.config.option.color[index2]"
              ></el-color-picker>
            </template>
          </el-row>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="图表设置" name="4">
        <barSetting
          v-if="form.config.type === 'bar'"
          v-model="form"
          :configData="configData"
        ></barSetting>
        <line-setting
          v-if="form.config.type === 'line'"
          v-model="form"
          :configData="configData"
        />
        <pie-setting
          v-if="form.config.type === 'pie'"
          v-model="form"
          :configData="configData"
        ></pie-setting>
      </el-collapse-item>
      <el-collapse-item title="图例设置" name="5">
        <el-form-item label="是否显示">
          <el-switch v-model="form.config.option.legend.show" />
        </el-form-item>
        <el-form-item label="图标">
          <el-select v-model="form.config.option.legend.icon">
            <el-option
              v-for="item in configData.iconList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-switch
            v-model="form.config.option.legend.orient"
            active-text="水平"
            inactive-text="垂直"
            active-value="horizontal"
            inactive-value="vertical"
          />
        </el-form-item>
        <el-form-item label="水平位置">
          <el-select v-model="form.config.option.legend.x">
            <el-option
              v-for="item in configData.xLayoutList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="垂直位置">
          <el-select v-model="form.config.option.legend.y">
            <el-option
              v-for="item in configData.yLayoutList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker
            v-model="form.config.option.legend.textStyle.color"
          />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            v-model="form.config.option.legend.textStyle.fontSize"
            :min="10"
            :max="30"
          />
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="提示设置" name="6">
        <el-form-item label="是否显示">
          <el-switch v-model="form.config.option.tooltip.show" />
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker
            v-model="form.config.option.tooltip.textStyle.color"
          />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            v-model="form.config.option.tooltip.textStyle.fontSize"
            :min="10"
            :max="30"
          />
        </el-form-item>
        <el-form-item label="内容格式">
          <el-input
            v-model="form.config.option.tooltip.formatter"
            type="textarea"
          />
        </el-form-item>
      </el-collapse-item>
      <div v-if="form.config.type !== 'pie'">
        <el-collapse-item title="x轴设置" name="7">
          <el-form-item label="是否显示">
            <el-switch v-model="form.config.option.xAxis.show" />
          </el-form-item>
          <el-form-item label="方向">
            <el-switch
              v-model="form.config.option.xAxis.position"
              active-text="上方"
              inactive-text="下方"
              active-value="top"
              inactive-value="bottom"
            />
          </el-form-item>
          <el-form-item label="坐标轴名称">
            <el-input v-model="form.config.option.xAxis.name" />
          </el-form-item>
          <el-form-item label="坐标轴名称位置">
            <el-select v-model="form.config.option.xAxis.nameLocation">
              <el-option
                v-for="item in configData.locationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称颜色">
            <el-color-picker
              v-model="form.config.option.xAxis.nameTextStyle.color"
            />
          </el-form-item>
          <el-form-item label="名称大小">
            <el-slider
              v-model="form.config.option.xAxis.nameTextStyle.fontSize"
              :min="10"
              :max="30"
            />
          </el-form-item>
          <el-form-item label="刻度标签旋转">
            <el-slider
              v-model="form.config.option.xAxis.axisLabel.rotate"
              :min="0"
              :max="180"
            />
          </el-form-item>
          <el-form-item label="刻度标签与轴线距离">
            <el-slider
              v-model="form.config.option.xAxis.axisLabel.margin"
              :min="8"
              :max="30"
            />
          </el-form-item>
          <el-form-item label="刻度标签显示间隔">
            <el-slider
              v-model="form.config.option.xAxis.axisLabel.interval"
              :min="0"
              :max="20"
            />
          </el-form-item>
          <el-form-item label="刻度标签宽度">
            <el-input-number
              v-model="form.config.option.xAxis.axisLabel.width"
            />
          </el-form-item>
          <el-form-item label="刻度标签超出展现方式">
            <el-select v-model="form.config.option.xAxis.axisLabel.overflow">
              <el-option
                v-for="item in configData.overflowList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内容格式">
            <el-input
              v-model="form.config.option.xAxis.axisLabel.formatter"
              type="textarea"
            />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="y轴设置" name="8">
          <el-form-item label="是否显示">
            <el-switch v-model="form.config.option.yAxis.show" />
          </el-form-item>
          <el-form-item label="方向">
            <el-switch
              v-model="form.config.option.yAxis.position"
              active-text="右"
              inactive-text="左"
              active-value="right"
              inactive-value="left"
            />
          </el-form-item>
          <el-form-item label="坐标轴名称">
            <el-input v-model="form.config.option.yAxis.name" />
          </el-form-item>
          <el-form-item label="坐标轴名称位置">
            <el-select v-model="form.config.option.yAxis.nameLocation">
              <el-option
                v-for="item in configData.locationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="名称颜色">
            <el-color-picker
              v-model="form.config.option.yAxis.nameTextStyle.color"
            />
          </el-form-item>
          <el-form-item label="名称大小">
            <el-slider
              v-model="form.config.option.yAxis.nameTextStyle.fontSize"
              :min="10"
              :max="30"
            />
          </el-form-item>
          <el-form-item label="刻度标签旋转">
            <el-slider
              v-model="form.config.option.yAxis.axisLabel.rotate"
              :min="0"
              :max="180"
            />
          </el-form-item>
          <el-form-item label="刻度标签与轴线距离">
            <el-slider
              v-model="form.config.option.yAxis.axisLabel.margin"
              :min="8"
              :max="30"
            />
          </el-form-item>
          <el-form-item label="刻度标签显示间隔">
            <el-slider
              v-model="form.config.option.yAxis.axisLabel.interval"
              :min="0"
              :max="20"
            />
          </el-form-item>
          <el-form-item label="刻度标签宽度">
            <el-input-number
              v-model="form.config.option.yAxis.axisLabel.width"
            />
          </el-form-item>
          <el-form-item label="刻度标签超出展现方式">
            <el-select v-model="form.config.option.yAxis.axisLabel.overflow">
              <el-option
                v-for="item in configData.overflowList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="内容格式">
            <el-input
              v-model="form.config.option.yAxis.axisLabel.formatter"
              type="textarea"
            />
          </el-form-item>
        </el-collapse-item>
      </div>
      <el-collapse-item title="标题设置" name="9">
        <el-form-item label="水平位置">
          <el-select v-model="form.config.option.title.x">
            <el-option
              v-for="item in configData.xLayoutList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="垂直位置">
          <el-select v-model="form.config.option.title.y">
            <el-option
              v-for="item in configData.yLayoutList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="form.config.option.title.textStyle.color" />
        </el-form-item>
        <el-form-item label="文字大小">
          <el-slider
            v-model="form.config.option.title.textStyle.fontSize"
            :min="10"
            :max="30"
          />
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
  <script setup>
import { ref, defineModel, onMounted, computed } from "vue";
import { deepClone } from "@/utils/arr.js";
import barSetting from "./components/barSetting.vue";
import lineSetting from "./components/lineSetting.vue";
import pieSetting from "./components/pieSetting.vue";
import { Plus } from "@element-plus/icons-vue";
import API from "@/api/model/meta";
import { ElMessage } from "element-plus";
const emit = defineEmits(["refresh"]);
const form = defineModel();
const props = defineProps({
  configData: { type: Object, default: {} },
  fileName: { type: String, default: "" },
});
const activeNames = ref();
const datasetList = ref([]);
const dimensionList = ref([]);
const indexList = ref([]);
onMounted(() => {
  console.log(props.configData)
  getDataSetList();
  colorChange();
});
const datasetChange = (val) => {
  form.value.config.dataset.dims = [];
  form.value.config.dataset.indexs = [];
  getFieldList();
};
const getDataSetList = async () => {
  let res = await API.chartDesigner.getDatasetIdList.post({
    fileName: props.fileName,
  });
  if (res.code == "200") {
    datasetList.value = res.dataList;
    if (form.value.config.dataset.datasetId) {
      getFieldList();
    }
    // if (
    //   form.value.config.dataset.dims.length > 0 &&
    //   form.value.config.dataset.indexs.length > 0 &&
    //   props.fileName
    // ) {
    //   getData();
    // }
  }
};
const getFieldList = async () => {
  let res = await API.chartDesigner.getChartFieldList.post({
    fileName: props.fileName,
    datasetId: form.value.config.dataset.datasetId,
  });
  if (res.code == "200") {
    dimensionList.value = res.dataList.filter(
      (ele) => ele.chartFieldType === "dimension"
    );
    indexList.value = res.dataList.filter(
      (ele) => ele.chartFieldType === "index"
    );
  }
};
const dataChange = () => {
  if (
    form.value.config.dataset.dims.length > 0 &&
    form.value.config.dataset.indexs.length > 0 &&
    props.fileName
  ) {
    getData();
  } else {
    ElMessage.warning({ message: "请至少选择一条维度及一条指标信息" });
  }
};
const getData = async () => {
  let param = {
    fileName: props.fileName,
    queryPattern:'designPattern',
    chartParam: {
      datasetId: form.value.config.dataset.datasetId,
      dims: form.value.config.dataset.dims,
      indexs: form.value.config.dataset.indexs,
    },
  };
  let res = await API.chartDesigner.queryChartData.post(param);
  if (res.code == "200") {
    let template = {};
    form.value.config.option.dataset = res.data;
    form.value.config.option.series = [];
    if (form.value.config.type === "bar") {
      template = {
        type: "bar", //图表类型
        barWidth: "15px",
        itemStyle: {},
        label: {}, //标签相关设置
      };
    } else if (form.value.config.type === "line") {
      template = {
        type: "line",
        itemStyle: {},
        label: {},
      };
    } else if (form.value.config.type === "pie") {
      template = {
        type: "pie",
        roseType: false, // '是否为南丁格尔图' 取值为'radius' 'area'
        radius: ["0%", "50%"],
        label: {},
      };
    }
    // form.value.config.dataset.indexs.forEach((element) => {
    //   form.value.config.option.series.push(template);
    // });
    // form.value.config.dataset.dims.forEach((element) => {

    // });
    for (var i = 0; i < res.data.dimensions.length - 1; i++) {
      form.value.config.option.series.push(deepClone(template));
    }
    // emit("refresh");
  }
};
const colorChange = (val) => {
  form.value.config.option.color = props.configData.colorScheme.find(
    (ele) => ele.id === form.value.config.colorId
  ).color;
};
</script>
<style lang="less" scoped>
:deep(.el-slider) {
  padding: 0px 12px;
}
.color-item {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 4px 0;
  cursor: pointer;
}
.add-button {
  padding-right: 0px;
}
</style>